<template>
    <div class="todoList">
        <todo-list-item
            v-for="todo in todos"
            :key="todo.id"
            :todo="todo"
            @change-state="todo.completed = $event.target.checked"
        ></todo-list-item>
    </div>
</template>

<script>
import TodoListItem from './TodoListItem.vue'
export default {
  components: { TodoListItem },
    props: ['todos']
}
</script>

<style>
  .todoList {
    display: grid;
    row-gap: 14px;
  }
</style>